<template>
  <div id="bgImage" class="aui-wrapper aui-page__login">
    <div class="homepage-hero-module">
      <div class="video-container">
        <video :style="fixStyle" autoplay class="fillWidth" loop muted>
          <source src="~@/assets/video/videoTest.mp4" type="video/mp4"/>
        </video>
      </div>
    </div>
    <div id="bg" class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">WeShopping</h2>
        </div>
        <div class="base">
          <!-- 注册登录界面 -->
          <div class="loginAndRegist">
            <!--登录表单-->
            <div class="loginArea">
              <transition
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInUp"
                  leave-active-class="animate__zoomOut"
                  appear
              >
                <!-- 标语 -->
                <div v-show="isShow" class="title">
                  AdminLogin
                </div>
              </transition>
              <transition
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInUp"
                  leave-active-class="animate__zoomOut"
                  appear
              >
                <!-- 密码框和用户名框 -->
                <div class="loginView" v-show="isShow">
                  <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
                           @keyup.enter.native="dataFormSubmitHandle()" status-icon>
                    <el-form-item prop="username">
                      <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                      <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha" class="captcha">
                      <el-row :gutter="20">
                        <el-col :span="14">
                          <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')" class="captchaInput">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                          </el-input>
                        </el-col>
                        <el-col :span="10" class="login-captcha">
                          <img :src="captchaPath" @click="getCaptcha()" class="login-captcha-1">
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">
                        {{ $t('login.title') }}
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </transition>
            </div>
            <!-- 注册表单 -->
            <div class="loginArea">
              <transition
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInUp"
                  leave-active-class="animate__zoomOut"
                  appear

              >
                <!-- 标语 -->
                <div v-show="userLogin" class="title">
                  UserLogin
                </div>
              </transition>
              <transition
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInUp"
                  leave-active-class="animate__zoomOut"
                  appear
              >
                <!-- 密码框和用户名框 -->
                <div class="loginView" v-show="userLogin">
                  <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
                           @keyup.enter.native="dataFormSubmitHandle()" status-icon>
                    <el-form-item prop="username">
                      <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                      <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha" class="captcha">
                      <el-row :gutter="20">
                        <el-col :span="14">
                          <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')" class="captchaInput">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                          </el-input>
                        </el-col>
                        <el-col :span="10" class="login-captcha">
                          <img :src="captchaPath" @click="getCaptcha()" class="login-captcha-1">
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">
                        {{ $t('login.title') }}
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </transition>
            </div>
            <!-- 信息展示界面 -->
            <div id="aaa" class="showInfo"
                 :style="{
             right:styleObj.rightDis
            }"
                 ref="showInfoView">
              <transition
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInUp"
                  leave-active-class="animate__zoomOut"
                  appear
              >
                <!-- 没有用户输入用户名或者找不到用户名的时候 -->
                <div v-show="isShow"
                     style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
                  <!-- 欢迎语 -->
                  <div
                      style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
                    当前为管理员登录
                  </div>
                  <!-- 欢迎图片 -->
                  <div style="flex: 2">
                    <el-button type="success" style="background-color:#257B5E;border: 1px solid #ffffff;" round
                               @click="changeToRegiest">普通用户登录
                    </el-button>
                  </div>
                </div>
              </transition>
              <transition
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInUp"
                  leave-active-class="animate__zoomOut"
                  appear
              >
                <div v-show="!isShow"
                     style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
                  <div
                      style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
                    当前为普通用户登录
                  </div>

                  <div style="flex: 2">
                    <el-button type="success" style="background-color:#257B5E;border: 1px solid #ffffff;" round
                               @click="changeToLogin">管理员登录
                    </el-button>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
        <div id="foot" class="login-footer">
          <p>
            <a href="http://demo.open.renren.io/renren-security" target="_blank">{{ $t('login.demo') }}</a>
          </p>
          <p><a href="https://www.renren.io/" target="_blank">Weshopping</a>2022 © 微淘项目组</p>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import {getUUID} from '@/utils'

export default {
  data() {
    return {
      captchaPath: '',
      dataForm: {
        username: 'admin',
        password: '123',
        uuid: '',
        captcha: ''
      },
      user: true,
      userLogin: false,
      isShow: true,
      styleObj: {
        rightDis: '0px'
      },
      admins: {},
      fixStyle: {},
      canply: {}
    }
  },
  computed: {
    dataRule() {
      return {
        username: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        password: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        captcha: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID()
      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http.post('/login', this.dataForm).then(({data: res}) => {
          console.log(res)
          if (res.code !== 0) {
            this.getCaptcha()
            console.log(res)
            return this.$message.error(res.msg)
          }
          Cookies.set('token', res.data.token)
          this.$router.replace({name: 'home'})
        }).catch(() => {
        })
      })
    }, 1000, {'leading': true, 'trailing': false}),
    changeToRegiest() {
      this.styleObj.bordertoprightradius = '0px'
      this.styleObj.borderbottomrightradius = '0px'
      this.styleObj.bordertopleftradius = '15px'
      this.styleObj.borderbottomleftradius = '15px'
      this.styleObj.rightDis = '50%'
      this.isShow = !this.isShow
      this.userLogin = !this.userLogin
      this.dataForm = {}
      this.getCaptcha()
    },
    changeToLogin() {
      this.styleObj.bordertoprightradius = '15px'
      this.styleObj.borderbottomrightradius = '15px'
      this.styleObj.bordertopleftradius = '0px'
      this.styleObj.borderbottomleftradius = '0px'
      this.styleObj.rightDis = '0px'
      this.isShow = !this.isShow
      this.userLogin = !this.userLogin
      this.getCaptcha()
    },

  },
  mounted() {
    // 屏幕自适应
    // 获取屏幕宽高，根据不同屏幕调整视频的宽高自适应大小
    window.onresize = () => {
      const windowWidth = document.body.clientWidth
      const windowHeight = document.body.clientHeight
      const windowAspectRatio = windowHeight / windowWidth
      let videoWidth
      let videoHeight
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth
        videoHeight = videoWidth * 0.5625
        this.fixStyle = {
          height: windowWidth * 0.5625 + 'px',
          width: windowWidth + 'px',
          'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
          'margin-left': 'initial'
        }
      } else {
        videoHeight = windowHeight
        videoWidth = videoHeight / 0.5625
        this.fixStyle = {
          height: windowHeight + 'px',
          width: windowHeight / 0.5625 + 'px',
          'margin-left': (windowWidth - videoWidth) / 2 + 'px',
          'margin-bottom': 'initial'
        }
      }
    }
  }
}
</script>
<style>
.base {
  /*background-image: url("~@/assets/images/loginBG.jpg");*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100%;
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
}

.loginAndRegist {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.loginArea {
  height: 400px;
  width: 350px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.showInfo {
  position: absolute;
  height: 400px;
  width: 350px;
  z-index: 2;
  top: 0;
  right: 0;
  background-image: url("~@/assets/images/welcome.png");

}

.title {
  width: 70%;
  flex: 1;
  border-bottom: 1px solid #257B5E;
  display: flex;
  align-items: center;
  color: #257B5E;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
}

#aaa {
  transition: 0.3s linear;
}

.pwdArea input {
  outline: none;
  height: 30%;
  border-radius: 13px;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}

.pwdArea input:focus {
  border: 2px solid #257B5E;
}

.registForm input {
  outline: none;
  height: 30%;
  border-radius: 13px;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}

.registForm input:focus {
  border: 2px solid #257B5E;
}

.captcha {
  width: 100px;
}

.login-captcha-1 {
  margin-left: 58px;
}

.loginView {
  width: 80%;
  margin-top: 20px;
}

#bg {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;

}

.fillWidth {
  position: relative;
  /*border: red solid 1px;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#bgImage {
  width: 100%;
}

.captchaInput {
  width: 120px;
}

#foot {
  /*border: #5daf34 solid 1px;*/
  width: 500px;
  height: 100px;
  bottom: 100px;

}

.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-container .poster img,
.video-container video {
  z-index: 0;
  position: absolute;
}

.video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
}
</style>